<!--
 * @Project_description: MenuItem
-->
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
<template>
  <div>
    <template v-for="item in menuData">
      <el-submenu v-if="item.children" :index="item.path" :key="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.pageName }}</span>
        </template>
        <menu-item :menu-data="item.children"/>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :disabled="item.disabled" :key="item.path">
        <i :class="item.icon"></i>
        <span>{{ item.pageName }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
export default {
  name: 'MenuItem', //文件名
  props: {
    menuData: {
      type: Array,
      required: true,
    },
  }, // props
  methods: {},
}
</script>
